<template>
  <el-dialog
    v-model="visible"
    :title="title"
    draggable
    destroy-on-close
    :close-on-click-modal="false"
    append-to-body
    @closed="handleCloseDialog"
    width="800"
  >
    <el-table
      ref="refsTable"
      @row-click="clickRow"
      :data="tableData"
      height="260px"
      highlight-current-row
    >
      <el-table-column width="35">
        <template #default="scope">
          <el-radio
            v-model="radio"
            :label="scope.row.id"
            @change="handleRadioChange(scope.$index, scope.row)"
          ></el-radio>
        </template>
      </el-table-column>

      <el-table-column
        label="断号"
        prop="serial"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        label="表单"
        prop="formName"
        :show-overflow-tooltip="true"
      >
      </el-table-column>

      <el-table-column
        label="原因"
        width="150px"
        prop="brokenNumberCause"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button
          type="primary"
          @click="confirm('documentformRef')"
          :loading="btnLoading"
          >保存</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { generateId } from "@/utils/util"
export default {
  name: "serial-broken",
  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      oldFieldValue: null, //field组件change之前的值
      fieldModel: null,
      visible: false,
      widgetKey: "",
      btnLoading: false,
      tableData: [],
      radio: "",
      selectedPersons: {},
    }
  },
  methods: {
    refreshWidgetKey() {
      //强制刷新组件！！
      this.widgetKey = "select-key-" + generateId()
    },
    /**
     * 初始化
     */
    async init(serialList) {
      this.visible = true
      this.tableData = serialList
    },
    clickRow(row, column, event) {
      this.selectedPersons = row
    },
    handleRadioChange(index, row) {
      this.selectedPersons = row
    },
    confirm() {
      console.log("选中的流水号", this.selectedPersons)
      this.$emit("confirm", this.selectedPersons)
      this.visible = false
    },
    /**
     * 关闭弹窗
     */
    handleCloseDialog() {
      this.btnLoading = false
    },
  },
}
</script>

<style lang="scss" scoped>
.hide-label {
  display: none;
}
</style>
